<script setup lang="ts">
import {reactive, ref} from "vue";
import {goodsAdd, goodsCategories} from "../../api/goods";
import {ElMessage} from "element-plus";

const Api = ref<string>("http://sellServe.hxw.asia:5000")
const options = ref([])
let form = reactive({
  name: '',
  category: "",
  price: '',
  imgUrl: "",
  goodsDesc: ""
})

async function getData() {
  let res = await goodsCategories()
  options.value = res.data
}

function handleAvatarSuccess(res: any, file: any) {
  let {code, msg, imgUrl} = res
  if (code == 0) {
    form.imgUrl = Api + imgUrl
  }
}

function beforeAvatarUpload(file: any) {
  const isJPG: boolean = /[jpeg|png]/.test(file.type)
  const isLt2M: boolean = file.size / 1024 / 1024 < 2
  if (!isJPG) ElMessage.error("上传头像图片只能是 JPG 格式!")
  if (!isLt2M) ElMessage.error('上传头像图片大小不能超过 2MB!')
  return isLt2M && isJPG
}

async function uploader() {
  let {imgUrl} = form
  imgUrl = imgUrl.substr(imgUrl.lastIndexOf('/') + 1)
  let res = await goodsAdd({...form, imgUrl})
  const {code, msg} = res.data
  if (code == 0) {
    form = {
      name: '',
      category: "",
      price: '',
      imgUrl: "",
      goodsDesc: ""
    }
  }
}

getData()
</script>
<template>
  <div id="goodsadd">
    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span>商品添加</span>
        </div>
      </template>
      <el-form class="mainadd" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="form.category" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.cateName"
                :value="item.cateName"
            >
              {{ item.cateName }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number
              v-model="form.price"
              :min="0"
              :max="100"
              label="描述文字"
          ></el-input-number>
        </el-form-item>
        <!-- 商品图片 -->
        <el-form-item label="商品图片">
          <el-upload
              class="avatar-uploader"
              :action="Api + '/goods/goods_img_upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <!-- 商品描述 -->
        <el-form-item label="商品描述">
          <el-input v-model="form.goodsDesc" type="textarea"></el-input>
        </el-form-item>
        <!-- 添加商品 -->
        <el-form-item label="">
          <el-button type="primary" @click="uploader">
            添加商品
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.mainadd {
  width: 500px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px solid;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>